<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { NRadioGroup, NDrawer, NDrawerContent, NButton, NFormItem } from 'naive-ui'
import { cloneDeep } from 'lodash'
import Single from './single.vue'
import Multiple from './multipe.vue'
import { useGetGoodsInfo } from './hooks'
import { getGoodsRead, getSkus } from '@/service/api/product'
import { useProductStore } from '@/store/modules/product'

interface Props {
  goodsId: number
}

const productStore = useProductStore()
const { specificationData } = storeToRefs(productStore)

const { goodsId } = defineProps<Props>()

const visible = defineModel<boolean>('visible')

const skuValue = ref<Api.Product.GoodsUpdateSkusParams['sku_value']>(specificationData.value.sku_value)
const goodsSkusCardInfo = ref<Api.Product.GoodsSkuInfoCard[]>([])
const skuCardList = ref<Api.Product.GoodsSkusListItem[]>([])

const handleSubmit = () => {
  console.log('specificationData', specificationData.value)
}

const handleAfterLeave = () => {
  skuValue.value = cloneDeep(specificationData.value.sku_value)
}

// const handleGetGoodsInfo = async () => {
//   try {
//     const { data } = await getGoodsRead(goodsId)
//     if (data) {
//       const { id, sku_value, goodsSkus, goodsSkusCard, sku_type } = data
//       specificationData.value = {
//         id,
//         sku_type: sku_type || 0,
//         sku_value: sku_value || specificationData.value.sku_value,
//         goodsSkus: goodsSkus || specificationData.value.goodsSkus,
//       }
//       skuValue.value = cloneDeep(specificationData.value.sku_value)
//       goodsSkusCardInfo.value = cloneDeep(goodsSkusCard)
//     }
//   } catch (error) {
//     console.error(error)
//   }
// }

const handleGetSkus = async () => {
  try {
    const { data } = await getSkus()
    skuCardList.value = data?.list || []
  } catch (error) {
    console.error(error)
  }
}

watch(visible, async (newVal) => {
  if (newVal) {
    const res = await useGetGoodsInfo(goodsId)
    console.log('res', res)
    if (res) {
      skuValue.value = res.singleSkuValue
      goodsSkusCardInfo.value = res.goodsSkusCardList
    }
    handleGetSkus()
  }
})

onMounted(async () => {
  await handleGetSkus()
})
</script>

<template>
  <NDrawer v-model:show="visible" :width="1000" @after-leave="handleAfterLeave">
    <NDrawerContent title="设置商品规格">
      <NFormItem>
        <NRadioGroup v-model:value="specificationData.sku_type">
          规格类型
          <NRadio label="单规格" :value="0" />
          <NRadio label="多规格" :value="1" />
        </NRadioGroup>
      </NFormItem>
      <template #footer>
        <NButton type="primary" class="ml-2 mr-3" @click="handleSubmit">提交</NButton>
        <NButton @click="visible = false">取消</NButton>
      </template>
      <Single v-if="specificationData.sku_type === 0"
        v-model:skuValue="skuValue as Api.Product.GoodsUpdateSkusParams['sku_value']" />
      <Multiple v-else v-model:goodsSkusCard="goodsSkusCardInfo" v-model:skuCardList="skuCardList"
        :goods_id="goodsId" />
    </NDrawerContent>
  </NDrawer>
</template>
